<template>
	<div class="page">
		<p class="title">基本用法</p>
		<p>
			<gr-rate v-model="rating" @change="rateChange" />
		</p>
		
		<p class="title">自定义大小</p>
		<p>
			<gr-rate v-model="rating2" @change="rateChange" size="50px"/>
		</p>
		
		<p class="title">自定义数量</p>
		<p>
			<gr-rate v-model="rating3" @change="rateChange" count="8"/>
		</p>
		
		<p class="title">自定义颜色和图标</p>
		<p>
			<gr-rate v-model="rating4" @change="rateChange" icon="fabulous-fill" uncheckColor="#eee" checkColor="#f40"/>
		</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rating: 4,
				rating2: 4,
				rating3: 4,
				rating4: 3,
			}
		},
		mounted() {
			
		},
		methods: {
			rateChange(val) {
				this.$toast.show('你刚刚打了'+val+'分')
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
	}
</style>
